<template>
  <view>
    <navigator url="/pages/search/index" open-type="navigate">
      <SearchBtn></SearchBtn>
    </navigator>
    <Swipers :swiperList="list"></Swipers>
    <!-- 分类导航区域 -->
    <view class="nav-list">
      <view
        class="nav-item"
        v-for="(item, i) in navList"
        :key="i"
        @click="navClickHandler(item)"
      >
        <image :src="item.image_src" class="nav-img"></image>
      </view>
    </view>
    <!-- 楼层区域 -->
    <view class="floor-list">
      <!-- 楼层 item 项 -->
      <view class="floor-item" v-for="(item, i) in floorList" :key="i">
        <!-- 楼层标题 -->
        <image :src="item.floor_title.image_src" class="floor-title"></image>
        <!-- 楼层图片区域 -->
        <view class="floor-img-box">
          <!-- 左侧大图片的盒子 -->
          <view class="left-img-box">
            <image
              :src="item.product_list[0].image_src"
              :style="{ width: item.product_list[0].image_width + 'rpx' }"
              mode="widthFix"
            ></image>
          </view>
          <!-- 右侧 4 个小图片的盒子 -->
          <view class="right-img-box">
            <view
              class="right-img-item"
              v-for="(item2, i2) in item.product_list"
              :key="i2"
            >
              <view v-if="i2 !== 0">
                <image
                  :src="item2.image_src"
                  mode="widthFix"
                  :style="{ width: item2.image_width + 'rpx' }"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getSwiperListAPI, getNavListAPI, getFloorList } from "@/api/home";
export default {
  data() {
    return {
      // 轮播图数组
      list: [],
      // 导航栏
      navList: [],
      //楼层
      floorList: [],
    };
  },
  onLoad() {
    this.getSwiperList();
    this.getNavList();
    this.getFloorList();
  },
  methods: {
    async getSwiperList() {
      const res = await getSwiperListAPI();
      this.list = res.message;
    },
    async getNavList() {
      const res = await getNavListAPI();
      this.navList = res.message;
    },
    async getFloorList() {
      const res = await getFloorList();
      this.floorList = res.message;
    },
    // 点击分类跳转
    navClickHandler(item) {
      if (item.name === "分类") {
        uni.switchTab({ url: "/pages/category/index" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-list {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor-item {
  width: 100%;
  .floor-title {
    display: flex;
    width: 100%;
    height: 60rpx;
  }
  .right-img-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .floor-img-box {
    display: flex;
    padding-left: 10rpx;
  }
}
</style>